// import TableFilterMixin from '@/mixins/TableFilterMixin'
import { Component, toNative, Watch } from 'vue-facing-decorator'
import { ButtonMenuTypeCnEnum } from '@/const/enum'
import { Tabs } from 'ant-design-vue'
import { defineAsyncComponent } from 'vue'
import { RouterView } from 'vue-router'
import Render from '@/render/Render'
import styled from 'vue3-styled-components'
import type { Key } from 'ant-design-vue/es/_util/type'
import router from '@/router'

const modules = () => {
    return import.meta.glob(['@/views/*.tsx', '@/views/**/*.tsx'])
}

@Component
export class TabsView extends Render {
    activeName = ''
    tabs = {} as {
        [key: string]: {
            title: string
            url: string
        }
    }

    onTabClick(index: Key) {
        router.push(this.tabs[index].url)
    }

    @Watch('$route.path')
    onRouteChange() {
        if (this.tabs[this.$route.path]) {
            this.activeName = this.$route.path
        }
    }

    onMounted() {
        const btns = (this.$route.meta.btnChildren as {
            menuName: string;
            path: string;
            btnPosition: null;
            btnStyle: null;
            btnEvent: null;
        }[]).filter((btn) => btn.btnPosition === ButtonMenuTypeCnEnum.标签页 && btn.path)

        btns.forEach((btn) => {
            this.tabs[btn.path] = {
                title: btn.menuName,
                url: btn.path
            }
        })
        this.onRouteChange()
        super.onMounted()
    }

    tabsElement: typeof Tabs = styled(Tabs)`
        height: auto !important;
        .ant-tabs-nav-wrap {
            padding: 4px 20px 0 20px;
        }
        .ant-tabs-content-holder {
            display: none !important;
            height: auto !important;
        }
    `

    render() {
        return <div class="h-full flex flex-col">
            <this.tabsElement onTabClick={this.onTabClick} v-model:activeKey={this.activeName}>
                { Object.keys(this.tabs).map((key) => {
                    return <Tabs.TabPane key={key} tab={this.tabs[key].title}>
                    </Tabs.TabPane>
                }) }
            </this.tabsElement>
            <RouterView/>
        </div>
    }
}

export default toNative(TabsView)



// // import TableFilterMixin from '@/mixins/TableFilterMixin'
// import { Component, toNative } from 'vue-facing-decorator'
// import TabsRender from '@/render/TabsRender'
// import { ButtonMenuTypeCnEnum } from '@/const/enum'
// import { Tabs } from 'ant-design-vue'
// import { defineAsyncComponent } from 'vue'

// const modules = () => {
//     return import.meta.glob(['@/views/*.tsx', '@/views/**/*.tsx'])
// }

// @Component
// export class TabsView extends TabsRender {

//     onMounted() {
//         const btns = (this.$route.meta.btnChildren as {
//             menuName: string;
//             path: string;
//             btnPosition: null;
//             btnStyle: null;
//             btnEvent: null;
//         }[]).filter((btn) => btn.btnPosition === ButtonMenuTypeCnEnum.标签页 && btn.path)

//         btns.forEach((btn, index) => {
//             const routeMapResult = btn.path
//             // 将动态路由转为detail组件
//             const routeMapResultComponent = (routeMapResult || '').replace(/\/:.+/, '/detail')
//             this.tabs[index] = {
//                 title: btn.menuName,
//                 component: defineAsyncComponent({
//                     loader: () => import(`/src/views${routeMapResultComponent}/Index.tsx`),
//                 })
//             }
//             console.log(import(`/src/views${routeMapResultComponent}/Index.tsx`))
//         })

//         super.onMounted()
//     }

//     render() {
//         return <this.tabsElement v-model:activeKey={this.activeName}>
//             { Object.keys(this.tabs).map((key) => {
//                 const Comp = this.tabs[key].component
//                 return <Tabs.TabPane key={key} tab={this.tabs[key].title}>
//                     <Comp/>
//                 </Tabs.TabPane>
//             }) }
//         </this.tabsElement>
//     }
// }

// export default toNative(TabsView)